<template>
	
	<div >
		
	
		<scroller lock-x   @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="0" >
			
			<div>
				
				<div class="free_column" @click="toDetail(index)" v-for="(item,index) in newList">
				
					<div class="column_img">
						<img :src="item.cover_pic"/>
					</div>
					<div class="column_bottom" style="padding-bottom: 0.5rem;">
						<flexbox >
					      <flexbox-item :span="8"><div class="flex-demo">
					      	<flexbox>
						      <flexbox-item :span="8">
						      	<div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
						      		<flexbox>
								      <flexbox-item :span="2">
								      	<div class="flex-demo">
								      		<img class="userImg" :src="info.image"/>
								      	</div>
								      </flexbox-item>
								      <flexbox-item>
								      	<div class="flex-demo" style="text-align: left;">
								      	  <div class="f15" style="font-size: 0.9rem;width: 7.5rem;overflow: hidden;">{{info.name}}</div>
								        </div>
								      </flexbox-item>
								    </flexbox>		
							      	
							    </div>
						      </flexbox-item>
						      <flexbox-item><div class="flex-demo " style="text-align: right;color: #6C6A6B;font-size: 0.9rem;">第{{item.stage}}节</div></flexbox-item>
						    </flexbox>
					      </div></flexbox-item>
					      <flexbox-item><div class="flex-demo" style="color:#910A81 ;font-size: 0.9rem;">免费</div></flexbox-item>
					   </flexbox>
					    <div style="width: 67%;padding-left: 0.5rem;">{{item.title}} </div>
					    <div style="padding-left: 10px;margin-top: 10px;color: #C7C7C7;font-size: 0.9rem;">
					    	<span>{{item.showtime}}更新</span>
					        <span style="margin-left: 20px;">{{item.length_time}}</span>
					    </div>
					    
					</div>
					
					
					
					
					<div v-if="item.id == changeId" @click.stop="clear"  style="background: #FFFFFF;overflow-x: auto;">
						<div style="display: flex;padding: 0.5rem;">
							<div style="flex-direction: column;width: 50%;">选节</div>
							<div style="flex-direction: column;width: 50%;text-align: right;">每周五更新1节</div>
						</div>
						
						<scroller lock-y scrollbar-x :bounce=false style="height: 3.5rem;width: 500px;">
					      <div style="width: 1000px;position: relative;height: 80px;">
					        <ul id="head" style="padding: 0;margin: 0;">
						 	<li @click="todetail(index)"  v-for="(item,index) in anthologyArr" style="margin-left: 0.5rem;">{{item.title}}</li>
						 </ul>
					      </div>
					    </scroller>
						
						 
						
						
					</div>
					
					
					
					
				</div>
				
				<load-more tip="loading" v-if="loading"></load-more>
				
				
				
			</div>
			
		</scroller>
		
		
		
		
		<div @click="toHome" style="z-index: 9999999;position: fixed;bottom:3rem;left: 0.5rem;">
					
			<img src="../../static/image/shouye.png" style="width: 3rem;"/>
			
		</div>
		
	</div>
	
	
	
	
	
	
</template>

<script>
	
	import {base64,DatetimeView,PopupPicker,XButton,Scroller,LoadMore} from 'vux'
	
	export default {
		
		components: {
			
		    PopupPicker,XButton,DatetimeView,Scroller,LoadMore,base64
		    
		},
		
		data () {
	    	return {
	    		
//		        lesson_id:this.$route.params.lesson_id,
                lesson_id:'',
		        list:'',
		        info:'',
		        access_token:'',
		      
		        onFetching: false,
		        loading:false,
		        newList:[],
		        page:1,
		        
		        a:['1','2','3','4','5','6','7','8'],
		        
		        anthologyArr:[],
		        changeId:'',
		        
		        row_count:'',
		        count:'',
		        allpage:'',
		        allList:'',
		        
		        videoSrc:'',
		        audioSrc:''
		      
		    }

	    },
		
		methods:{
			
			//获取列表详情
			getDetail(){
				
				this.$store.commit('updateLoadingStatus',true);
				
				this.$http.get(this.$store.state.api + 'index/lesson-info&lesson_id='+this.lesson_id +'&page=' + this.page+'&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.list = response.body.data.list,
					this.info = response.body.data.info,
					this.row_count = response.body.data.row_count
					console.log(this.list)
					
					this.count = Math.ceil(this.row_count / 10);
					console.log(this.count)
					
					if(this.page == 1){
						this.getChoice()
					}
					
					for(var i = 0 ; i < response.body.data.list.length ; i ++){

						this.newList.push(this.list[i])
							
					}
					
                    this.$root.getShareDetail('在家就可以学习老师上万元的线下课程',this.info.name,'https://newzhouzi.fxm365.com/addons/zjhj_mall/core/web/temp/20180815160427.jpg');
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				}, (response) => {
	                 
	                 
				});
			},
			
			getChoice(){
				
				for(var i = 0 ; i < this.count ; i ++){
					
					this.allpage = i + 1
					
					console.log(this.allpage)
					
					this.getInfoDetail()
					
				}
				
			},
			
			getInfoDetail(){
				
				this.$store.commit('updateLoadingStatus',true);
				
				this.$http.get(this.$store.state.api + 'index/lesson-info&access_token=' + this.access_token +'&lesson_id='+this.lesson_id +'&page=' + this.allpage)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.allList = response.body.data.list
					
					console.log(this.allList)
					
//					for(var i = 0 ; i < this.allList.length ; i ++){
//						
//						var obj = {};
//						
//						obj.title = this.list[i].stage;
//						obj.id = this.list[i].id
//						
//						if(this.allList.length == 0){
//							
//						}else{
//							
//							this.anthologyArr.push(obj)
//							this.changeId = this.anthologyArr[0].id
//							
//							console.log(this.changeId)
//							
//						}
//						
//					}
					
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				}, (response) => {
	                 
	                 
				});
				
			},
			
			
			//触底加载
		    onScrollBottom:function(){
		      
		      if (this.onFetching) {
		        // do nothing
		      } else {
		        
		        
		        
		        console.log('开始')
		        
		        this.page = this.page + 1;
		        
		        console.log(this.page)
		        
		        this.getDetail();
		        
		        this.loading = true;
		        
		        
		        
		      this.onFetching = false
		        setTimeout(() => {
		
		        this.onFetching = false
		          console.log('结束')
		          this.loading = false;
		        }, 500)
		        
		      }
		    },
		    
		    //选集清除冒泡
		    clear(){
		    	
		    },
		    
		    //跳转到详情页面
		    todetail(index){
		    
		    	
		    	var lesson_id = this.info.id
				var section_id = this.anthologyArr[index].id
				
				this.$router.push({ path: '/freeDetail',name:'freeDetail',params:{lesson_id:lesson_id,section_id:section_id}});
		    	
		    },
			
			
			
			//跳转到详情页面
			toDetail(index){
				
				console.log(this.newList[index])
				
		    	var lesson_id = this.info.id
				var section_id = this.newList[index].id
				
				this.$router.push({ path: '/freeDetail',name:'freeDetail',params:{lesson_id:lesson_id,section_id:section_id}});
			},
			
			//返回首页
			toHome(){
				
				this.$router.push({ path: '/'});
				
			},
			
			//获取地址栏信息
			getUrlStr(name){
		      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
		      if(reg.test(window.location.href)){
		        return unescape(RegExp.$2.replace(/\+/g," "))
		      }
		      return undefined
		    },

		    
		},
		
		mounted(){
			
			var lesson_id = this.$route.params.lesson_id
			
			if(lesson_id != undefined){
				
				localStorage.setItem("lesson_id",lesson_id);
				
			}
			
			var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
    	   this.access_token = localStorage.getItem('access_token');
    	   this.lesson_id = localStorage.getItem('lesson_id');
    	   
    	   console.log(5555555555555555)
    	   console.log(this.access_token)
    	   console.log(this.lesson_id)
			
			this.getDetail()
			
		}
		
		
	}
	
	
	
	
	
	
</script>

<style>
	
	
	
	.column_top{
		border-bottom: solid 1px #e3e3e3;
    	/*padding-left: 10px;*/
    	padding: 5px 10px;
	}
	.free_column{
		background: #FFFFFF;
	}
	
	#head{
		/*width: 100%;*/
		display: inline;
		white-space: nowrap;
		overflow-x:scroll ;
	    float: left;
	    /*overflow-y: hidden;*/
	}
	#head li{
		color: #FFFFFF;
		background: #8D087B;
		display: inline-block;
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		text-align: center;
		border-radius: 0.5rem;
		/*padding-left: 10px;*/
	}
</style>